<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/header :: common_header(~{::title}, ~{::link}, ~{::script})">
    <title>资源管理</title>
    <link rel="stylesheet" href="../../static/app/css/index.css" th:href="@{/app/css/index.css}">
    <!-- My JavaScript -->
    <script src="../../static/app/sys/acllist.js" th:src="@{/app/sys/acllist.js}"></script>
</head>

<body class="easyui-layout" data-options="fit:true" style="margin:2px;">

<div data-options="region:'center',title:'',border:false">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'权限查询',hideCollapsedContent:false,height:'auto'"
             style="padding:5px 0;">
            <form id="searchForm" method="POST" class="search-form">
                <div class="form-item">
                    <label class="label-top">权限名称：
                        <input id="sf_name" name="name" class="easyui-textbox"/>
                    </label>
                </div>
                <div class="form-item">
                    <a href="javascript:void(0);" id="searchBtn" class="easyui-linkbutton primary" iconCls="e-icon fa fa-search">查询</a>
                    <a href="javascript:void(0);" id="resetBtn" class="easyui-linkbutton" iconCls="e-icon fa fa-repeat">重置</a>
                </div>
            </form>
        </div>
        <div data-options="region:'center'">
            <table id="aclGrid" data-options="toolbar:'#aclGrid-toolbar',border:false"></table>
            <div id="cm" class="easyui-menu" style="width: 120px; display: none;">
                <div permission="sys:acl:add" onclick="addSameLevel();">添加同级权限</div>
                <div permission="sys:acl:add" onclick="addDownLevel();">添加下级权限</div>
                <div class="menu-sep"></div>
                <div permission="sys:acl:update" onclick="update();" data-options="iconCls:'fa fa-edit'">修改权限</div>
                <div class="menu-sep"></div>
                <div permission="sys:acl:del" onclick="deletes();" data-options="iconCls:'fa fa-trash'">删除权限</div>
            </div>
        </div>

        <div data-options="region:'east',border:false,split:true" style="width: 280px;">
            <div id="aclRelatedLayout" class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',title:'关联角色列表',border:false,collapsible:false,split:true" style="height:200px">
                    <table id="aclRoleGrid" class="easyui-datagrid"
                           data-options="fit:true,fitColumns:true,pagination:false,border:false">
                        <thead>
                        <tr>
                            <th data-options="field:'name',width:100">角色名称</th>
                            <th data-options="field:'enname',width:100">角色英文名</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div data-options="region:'center',title:'关联用户列表',border:false">
                    <table id="aclUserGrid" class="easyui-datagrid"
                           data-options="fit:true,fitColumns:true,pagination:false,border:false">
                        <thead>
                        <tr>
                            <th data-options="field:'username',width:100">用户名称</th>
                            <th data-options="field:'nickName',width:100">用户昵称</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- toolbar -->
<div id="aclGrid-toolbar" style="padding:5px;"><!-- 上 右 下 左  -->
    <a href="javascript:;" class="easyui-linkbutton" plain="true" permission="sys:acl:add"
       iconCls="fa fa-plus" onclick="add()">添加</a>
    <!--<a href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="fa fa-trash" onclick="deletes()">删除</a>-->
    <span style="color: green;">右击显示上下文菜单</span>
</div>

<div id="dlg" class="easyui-dialog" data-options="title:'',width:650,height:400,closed:true">
    <form id="fm" class="dlg-form" method="POST">
        <input name="id" type="hidden"/>
        <fieldset>
            <legend>权限信息</legend>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">权限名称：</label>
                    <input id="fm_name" name="name" class="easyui-validatebox easyui-textbox" prompt="请输入名称"
                           data-options="required:true">
                </div>
                <div class="form-item">
                    <label class="label-top">权限英文名：</label>
                    <input id="fm_enname" name="enname" class="easyui-validatebox easyui-textbox" prompt="请输入英文名"
                           data-options="required:true">
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">权限值：</label>
                    <select id="fm_value" name="value" class="easyui-validatebox easyui-textbox" prompt="请输入权限值"
                            data-options="required:true"></select>
                </div>
                <div class="form-item">
                    <label class="label-top">父权限：</label>
                    <select id="fm_parentId" name="parentId" class="easyui-validatebox easyui-comtree"
                            data-options="panelWidth:'auto',panelHeight:'auto'"></select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">权限类型：</label>
                    <select id="fm_type" name="type" class="easyui-validatebox easyui-combobox"
                            data-options="required:true"></select>
                </div>
                <div class="form-item">
                    <label class="label-top">图标：</label>
                    <input id="fm_icon" name="icon" class="easyui-validatebox easyui-textbox"/>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">顺序：</label>
                    <input id="fm_seq" name="seq" class="easyui-validatebox easyui-numberbox" data-options="required:true"/>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item" style="width: 100%">
                    <label class="label-top">URL：</label>
                    <input id="fm_url" name="url" class="easyui-validatebox easyui-textbox" style="width: 460px;"/>
                </div>
            </div>
            <div class="form-row">
                <div class="form-item" style="width:100%;">
                    <label class="label-top">备注：</label>
                    <input id="fm_note" name="note" class="easyui-validatebox easyui-textbox"
                           data-options="height:60,multiline:true" style="width: 460px;"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- My JavaScript -->

</body>
</html>
